<template>
  <div id="loginPublic">
    <div class="box">
      <p class="h1">{{ currTime(hours) }}</p>
      <p class="tit">{{ region }}</p>
      <p class="txt">
        Photo by&nbsp;<a class="underline" :href="first_address">{{ author }}</a>
        on <a class="underline" :href="first_address">{{ result_address }}</a>
      </p>
    </div>
    <div v-if="Imgurl==null" class="banner">
          <img  src="@/assets/picture1.jpg" alt="">
    </div>
    <div v-else class="banner">
      <img  :src="Imgurl" alt="">
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, computed, getCurrentInstance} from 'vue'

export default defineComponent({
  setup() {
    let myDate = new Date()
    let hours = ref(myDate.getHours());
    let starTime = ref('');
    let endTime = ref('');
    let Imgid;
    const Imgurl = ref('');
    const author = ref('');
    const region = ref('');
    const first_address = ref('');
    const second_address = ref('');
    const third_address = ref('');
    const result_address = ref('');
    //获取当前时间
    const currTime = computed(() => (H) => {
      if (H >= 7 && H <= 11) {
        starTime.value = 7
        endTime.value = 11
        return "Good Morning"
      } else if (H >= 12 && H <= 19) {
        starTime.value = 12
        endTime.value = 19
        return "Good Afternoon"
      } else if (H >= 20 || H <= 6) {
        starTime.value = 20
        endTime.value = 6
        return "Good Evening"
      } else {
        return 'The time now is   ' + H
      }
    })


    let {proxy} = getCurrentInstance()
    proxy.$request('get', '/api/v1/login/background/7/11', {
      backgroundId: Imgid,
      startTime: starTime.value,
      endTime: endTime.value
    }).then(res => {
      Imgid = res.data.id;
      Imgurl.value = res.data.url;
      author.value = res.data.author;
      region.value = res.data.region;
      first_address.value = res.data.source_address;
      second_address.value = first_address.value.split(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/);
      third_address.value = second_address.value[2].split('.');
      if (third_address.value.length > 1) {
        result_address.value = third_address.value[1];
      } else {
        result_address.value = third_address.value[0];
      }
      let ground = localStorage.setItem("background", Imgid);
    })

    return {
      currTime,
      hours,
      Imgurl,
      author,
      region,
      first_address,
      result_address
    }
  },

});
</script>

<style lang="less">
#loginPublic {
  --left: calc(1920px / 48);

  .box {
    position: fixed;
    bottom: 0;
  }

  .box .h1 {
    font-size: 40px;
    font-weight: bold;
    margin-left: var(--left);
  }

  .box .tit {
    margin-left: var(--left);
    margin-top: -40px;
    margin-bottom: 30px;
  }

  .box .txt {
    font-size: 15px;
    margin-left: var(--left);
  }

  .box .txt .underline {
    color: #fff;
  }

  .box .txt .underline:hover {
    text-decoration: underline;
  }

  .banner img{
    position: relative;
    animation: Interface 50s linear infinite;
    z-index: -1;
    top: 0;
  }

  @media screen and (min-width: 1700px) {
    .banner img{
      width: 100%;
      height: 100%;
    }

    @keyframes Interface {
      0% {
        top: 0;
      }
      50% {
        top: -760px;
      }
      100% {
        top: 0;
      }
    }
  }
  @media screen and (min-width: 1400px) {
    .banner img{
      width: 115%;
      height: 100%;
    }

    @keyframes Interface {
      0% {
        top: 0;
      }
      50% {
        top: -660px;
      }
      100% {
        top: 0;
      }
    }
  }
  @media screen and (min-width: 1000px) {
    .banner img{
      width: 150%;
      height: 100%;
    }
    @keyframes Interface {
      0% {
        top: 0;
      }
      50% {
        top: -658px;
      }
      100% {
        top: 0;
      }
    }
  }

  .box p,
  span {
    color: #fff;
  }

}

</style>